<template>
    <div style="position:relative">
        <Form v-if=" Object.keys(formItem).length >=1 " :model="formItem" :label-width="300" label-position="right">
            <Card :bordered="false" style="background:#fff;padding: 20px;width: 60vw;">
                <p slot="title">修改每日数据</p>

                <FormItem label="部门：">
                    <!-- <Input disabled v-model="formItem.department" class="FormItemInput"></Input> -->
                    <Select class="FormItemInput" v-model="formItem.department">
                        <Option v-for="item in demList " :value="item" :key="item">{{ item }}</Option>
                    </Select>
                </FormItem>

                <FormItem label="今日到店客户：">
                    <Input v-model="formItem.today_shop_person_num" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="定金：">
                    <Input v-model="formItem.front_money" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="会员回款：">
                    <Input v-model="formItem.vip_back_money" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="入驻回款：">
                    <Input v-model="formItem.check_in_back_money" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="代办回款：">
                    <Input v-model="formItem.agency_back_money" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="代账回款：">
                    <Input v-model="formItem.account_back_money" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="商标回款：">
                    <Input v-model="formItem.trademark_back_money" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="科技服务：">
                    <Input v-model="formItem.science_money" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="其他：">
                    <Input v-model="formItem.other_money" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="目标金额：">
                    <Input disabled v-model="formItem.target_money" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="目前金额：">
                    <Input disabled v-model="now_money" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="完成目标率：">
                    <Input disabled v-model="completion" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="图片：">
                    <input type="file" @change="upImg($event,'pic')" accept="image/*">
                    <div class="picDiv">
                        <img class="pic" v-if="!formItem.pic.length" :src="defaultPic">
                        <div class="picBox" v-else v-for="(item, index) in formItem.pic" :key="index">
                            <img class="pic" :src="item">
                            <p class="close" @click="picDel(index,'pic')">
                                <img src="@/assets/images/close.png" />
                            </p>
                        </div>
                    </div>
                </FormItem>

                <Button type="primary" class="sure_btn" @click="save">保存</Button>
            </Card>
        </Form>

        <Spin size="large" fix v-if="loading"></Spin>
    </div>
</template>

<script>
    import axios from '@/libs/api.request'
    import {
        mapMutations,
        mapGetters
    } from 'vuex'
    export default {
        name: 'daily-data-edit',
        data() {
            return {
                // 每日数据id
                wrdid: '',
                // 加载状态
                loading: false,
                // 默认图片
                defaultPic: require('@/assets/images/addressAddBtn_03.jpg'),

                formItem: {}
            }
        },
        computed: {
            demList() {
                return this.getDem()
            },
            now_money() {
                return this.formItem.now_money + this.today_total_money
            },
            today_total_money() {
                let {
                    vip_back_money,
                    check_in_back_money,
                    agency_back_money,
                    account_back_money,
                    trademark_back_money,
                    science_money,
                    other_money
                } = this.formItem

                let arr = [
                    vip_back_money,
                    check_in_back_money,
                    agency_back_money,
                    account_back_money,
                    trademark_back_money,
                    science_money,
                    other_money
                ]
                let sum = 0

                arr.forEach(item => {
                    sum += parseInt(item)
                })

                return sum
            },
            completion() {
                return this.now_money > 0 ? Math.round(this.now_money / this.formItem.target_money * 100) + '%' : 0 + '%'
            }

        },
        methods: {
            ...mapGetters(['getDem']),
            ...mapMutations(['myClose']),

            // 获取每日数据详情
            getDailyDataDetail() {
                this.loading = true
                let data = {
                    wrdid: this.wrdid
                }
                axios.ajax_post('admin-work_record_data-ajax_get_wrd_detail', data).then(res => {
                    this.loading = false
                    if (res.data.code === 1) {
                        this.formItem = res.data.data.wra_detail
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })

            },

            // 上传图片
            upImg(e, mk) {
                const file = e.target.files
                for (let i = 0; i < file.length; i++) {
                    // up_to_cos 第二个参数表示返回的url类型
                    // 0：cos，1：cdn,2:带图片处理的cdn
                    axios.up_to_oos(file[i], (file_url) => {
                        this.formItem[mk].push(file_url)
                    })
                }
            },

            // 删除图片
            picDel(index, mk) {
                this.formItem[mk].splice(index, 1)
            },

            save() {
                let data = this.formItem
                data.wrdid = this.wrdid
                data.today_total_money = this.today_total_money
                axios.ajax_post('admin-work_record_data-ajax_save_wrd', data).then(res => {
                    if (res.data.code === 1) {
                        this.$Notice.success({
                            title: res.data.msg,
                            duration: 3
                        })
                        this.myClose('daily-data-edit')
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            }
        },
        created() {
            this.wrdid = this.$route.params.id
            this.getDailyDataDetail()
        },
        activated() {
            if (this.wrdid != this.$route.params.id) {
                this.wrdid = this.$route.params.id
                this.getDailyDataDetail()
            }
        }
    }
</script>

<style lang='less' scoped>
    .FormItemInput {
        width: 20vw;

        &.inline {
            width: 9vw;
            margin-right: 28px;

            &:nth-of-type(2n) {
                margin-right: 0;
            }
        }
    }

    .picDiv {

        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        position: relative;
        padding-top: 15px;
    }

    .picDiv .pic {
        width: 300px;
        height: 200px;
    }

    .picBox {
        position: relative;
        width: 300px;
        margin-right: 10px;
    }

    .close {
        position: absolute;
        top: -7px;
        right: -7px;
        cursor: pointer;
    }


    .sure_btn {
        margin-left: 20vw;
        width: 10vw;
    }
</style>